<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>title</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<style>
		html,
		body {
			background-color: #F5F6F6;
		}

		.empty {
			margin-left: auto;
			margin-right: auto;
			width: 98%;
		}

		.doufu {
			margin-top: 5px;
		}

		.doufu li {
			width: 50%;
			float: left;
		}

		.doufu li div {
			margin: 5px;
			background-color: #fff;
			padding: 10px;
		}

		.shu {
			text-align: center;
			font-size: 22px;
			line-height: 30px;
			height: 30px;
			color: #1abc9c
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 50%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		.s {
			font-size: 10px;
			text-align: left;
		}

		.aa {
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab {
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}

		.ab span {
			margin-left: 30px;
			font-size: 16px
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab" checked>
			<label for="tab1">健康列表</label>
			<div class="content" id="qqq">
				<div v-for="(todo, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 90px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/jk.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 10px" />
					</div>
					<div class="aa">
						<span style="margin-top: 10px;margin-left:5px;font-size: 13px">{{todo.h_createDate}}</span>
					</div>
					<div class="aa" style=";text-align: right;" v-on:click="addHe(todo.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情 ></span>
					</div>
					<div class="ab"><span style="font-size: 13px">施工队伍：{{todo.constructionTeam.t_name}}</span></div>
					<div class="ab">
						<span style="font-size: 13px">健康状态：{{todo.h_yes==1?"异常":"正常"}}</span>
					</div>
				</div>

			</div>
		</li>
		<li>
			<input id="tab2" type="radio" name="tab">
			<label for="tab2">健康统计</label>
			<div class="content">
				<div class="empty">
					<ul class="doufu">
						<li>
							<div>
								<p class="bimg">
									当日实到人数
								</p>
								<p class="shu" id="drsd">

								</p>
							</div>
						</li>
						<li>
							<div>
								<p class="bimg">
									当日统计人数
								</p>
								<p class="shu" id="drtj">

								</p>
							</div>
						</li>
						<li>
							<div>
								<p class="bimg">
									当日异常人数
								</p>
								<p class="shu" id="dryc">

								</p>
							</div>
						</li>
						<li>
							<div>
								<p class="bimg">
									异常占比
								</p>
								<p class="shu" id="yczb">

								</p>
							</div>
						</li>
					</ul>
				</div>
				<div style="margin-top: 10px">
					<table class="table table-striped table-bordered table-hover" style="margin-top: 10px">
						<thead>
							<tr>
								<th class="s"><i class></i> &nbsp;&nbsp;&nbsp;&nbsp;日期</th>
								<th class="s"><i class></i> 应到人数</th>
								<th class="s"><i class></i> 异常人数</th>
								<th class="s"><i class></i> 占比</th>
								<th class="s"><i class></i> 队伍名称</th>
							</tr>
						</thead>
						<tbody id="qqq1">
							<tr v-for="(l,index) in todos">
								<td v-text="l.s_createDate" style="text-align: left;"></td>
								<td v-text="l.s_teamnum" style="text-align: left;"></td>
								<td v-text="l.s_no_num" style="text-align: left;"></td>
								<td v-text="l.s_proportion*100+'%'" style="text-align: left;"></td>
								<td v-text="l.s_team " style="text-align: left;"></td>
							</tr>
						</tbody>
					</table>

				</div>
				<!-- 健康异常当月逐日折线图 -->
				<div id="container" style="height: 200px; width: 100%;padding-top: 10px"></div>
			</div>
		</li>
	</ul>
</body>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script src="../../script/echarts.min.js"></script>
<script type="text/javascript">
	apiready = function () {
		api.setRefreshHeaderInfo({
				visible: true,
				bgColor: "rgba(0,0,0,0)",
				textColor: "#666",
				textDown: "下拉刷新",
				textUp: "释放刷新",
			},
			function (ret, err) {
				window.location.reload();
				api.refreshHeaderLoadDone();
			}
		);
		//片区id
		// var areaid = $api.getStorage('selectpor').id
		var areaid = null;
		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		if (role != "construction") {
			areaid = $api.getStorage("selectpor").id;
		} else {
			areaid = reg.data.areaid;
		}
		//项目id
		var proid = $api.getStorage('userSession').data.proId;
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var teamid = "";
		if (sids == "construction") {
			teamid = $api.getStorage('userSession').data.team_id
		}
		//健康列表
		var app = new Vue({
			el: '#qqq',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/healthy/list.json",
					data: {
						areaid: areaid,
						proid: proid,
						teamid: teamid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						// console.log(JSON.stringify(result))
						for (var i = 0; i < result.data.length; i++) {
							app.todos.push(result.data[i])
						}
					}
				});
			},

		})
		//健康统计列表
		var app1 = new Vue({
			el: '#qqq1',
			data: {
				todos: []
			},
			created: function () {
				$.ajax({
					type: "post",
					//async : false, //同步执行
					url: BaseServiceUrl + "mobile/healthy/findHealthy_month.json",
					data: {
						areaid: areaid,
						proid: proid,
						teamid: teamid
					},
					dataType: "json", //返回数据形式为json
					success: function (result) {
						for (var i = 0; i < result.data.length; i++) {
							app1.todos.push(result.data[i])
						}
					}
				});
			},

		})




		//图
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/healthy/findCols.json",
			data: {
				areaid: areaid,
				proid: proid,
				teamid: teamid
			},
			dataType: "json", //返回数据形式为json
			success: function (ret) {
				var data = ret.data;
				testJson = eval("(" + data + ")");

				$("#drsd").html(testJson.drsd)
				$("#drtj").html(testJson.drsd)
				$("#dryc").html(testJson.dryc)
				$("#yczb").html(testJson.dryc / testJson.drsd * 100 + "%")
			}
		});

		var qiyeid = $api.getStorage("userSession").data.enterprise.id;
		var roleId = $api.getStorage("userSession").data.sysRole.sysRoleCode.id;
		//健康异常折线图
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/healthy/statis.json",
			data: {
				e_id: qiyeid,
				a_tid: teamid,
				area_id: areaid,
				role_id: roleId
			},
			dataType: "json", //返回数据形式为json
			success: function (result) {
				// alert(JSON.stringify(result))

				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					color: "#66AFFC",
					title: {
						text: "当月健康异常统计",
						left: "center",
					},
					tooltip: {
						trigger: "axis",
					},
					xAxis: {
						type: "category",
						data: result.daylist,
					},
					yAxis: {
						type: "value",
					},
					series: [{
						name: "异常",
						data: result.worklist,
						type: "line",
						smooth: true,
					}, ],
				};
				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
			},
		});

	};

	//详情
	function addHe(id) {
		var sids = $api.getStorage("userSession").data.sysRole.sysRoleCode.role_number;
		var url = "healthy_view_window.html";
		if (sids == "construction") {
			url = 'healthy_view_window.html'
		}
		api.openWin({
			name: 'healthy_view',
			url: url,
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}
</script>

</html>